<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎使用hub平台!</title>
<script src="/static/js/vue.js"></script>
<script src="/static/js/jquery-3.3.1.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
    <!-- 引入组件库 -->
    <script src="/static/js/element.js"></script>
</head>
<body>

<div id="app">
    <template>
        <div class="login-container">
            <el-form ref="form" :model="form" label-width="80px" class="login-form">
                <h2 class="login-title">管理系统</h2>
                <el-form-item label="用户名">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" show-password></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </template>
</div>
<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data(){
        return {
            form: {
                username: "",
                password: ""
            }
        }

    },
    mounted :function () {
        this.init();
        console.log('load success...')
    },
    methods :{
        init: function(){
        	console.log('call init method.')
        },
        onSubmit() {
            $.ajax({
                type: "POST",
                url: "/login",
                data : { 'username': this.form.username,
                'password': this.form.password},
                success: function(data){
                    if(data.status=="OK"){
                        window.location.href = '/hub/v1/index';
                    }else {

                        alert("账号或密码错误")
                    }
                }
            });

        }
    }
});
</script>
<style acoped>
    .login-form {
        width: 350px;
        margin: 160px auto; /* 上下间距160px，左右自动居中*/
        background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
        padding: 30px;
        border-radius: 20px; /* 圆角 */
    }

    /* 背景 */
    .login-container {
        position: absolute;
        width: 99%;
        height: 99%;
        background-image: url("/static/img/background.jpg");
    }

    /* 标题 */
    .login-title {
        color: #303133;
        text-align: center;
    }
</style>
</body>
</html>
